<template>
	<div>
		<jk-dialog
			v-model="showDialog"
			:title="`${ruleForm.machineName || ''}-工艺详情`"
			width="1200px"
			:show-close-btn="true"
			:show-confirm-btn="false"
			:show-cancel-btn="false"
			@on-close="onVisibleChange(false)"
			@on-visible-change="onVisibleChange"
		>
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px" :show-message="false">
				<el-tabs ref="box1" type="border-card" class="">
					<el-tab-pane label="基本信息">
						<span slot="label"><i class="el-icon-tickets"></i> 基本信息</span>
						<el-row class="flex-start-center-wrap">
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="品种">
									<span class="read-only-2">{{ ruleForm.productName }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="批号">
									<span class="read-only-2">{{ ruleForm.batchCode }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="工序">
									<span class="read-only-2">{{ ruleForm.processName }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="机型">
									<span class="read-only-2">{{ ruleForm.machineModelName || '无' }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="纺纱方式">
									<span class="read-only-2">{{ ruleForm.spinTypeName || '无' }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="销售工艺">
									<span class="read-only-2">{{ ruleForm.batchOneList && ruleForm.batchOneList.length ? ruleForm.batchOneList.map(x => x).join(',') : '无' }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-0" label="品种工艺单">
									<span class="read-only-2">{{ ruleForm.specSheetCode }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-0" label="反写工艺单">
									<span class="read-only-2">{{ ruleForm.ifUpdateSpecSheet ? '是' : '否' }}</span>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>

					<el-tab-pane>
						<span slot="label"><i class="el-icon-reading"></i> 其他信息</span>
						<el-row class="flex-start-center-wrap">
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="改前品种">
									<span class="read-only-2">{{ ruleForm.preProductName || '无' }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="改前批号">
									<span class="read-only-2">{{ ruleForm.preBatchCode || '无' }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="纸管颜色">
									<span class="read-only-2">{{ ruleForm.paperTubeList && ruleForm.paperTubeList.length ? ruleForm.paperTubeList.map(x => x.name).join(',') : '无' }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="腰绳颜色">
									<span class="read-only-2">{{ ruleForm.waistPopeList && ruleForm.waistPopeList.length ? ruleForm.waistPopeList.map(x => x.name).join(',') : '无' }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="标签颜色">
									<span class="read-only-2">{{ ruleForm.labelColorList && ruleForm.labelColorList.length ? ruleForm.labelColorList.map(x => x.name).join(',') : '无' }}</span>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>
				</el-tabs>
				<div ref="box2" class="flex-between-center margin-bottom-4 margin-top-10">
					<el-tag type="primary" effect="plain">
						<span class="el-icon-connection"></span>
						<span>工艺项目明细</span>
					</el-tag>
					<div class="flex-start-center" style="align-items: flex-end;font-size: 12px;">
					</div>
				</div>
				<jk-table ref="jkTable" border :data="ruleForm.specSheet.specSheetParamList || []" :height="dialogTableHeight - 20">
					<vxe-column title="序号" type="seq" align="center" :width="60"></vxe-column>
					<vxe-column title="项目名称" align="left" field="specParamName" :min-width="160"></vxe-column>
					<vxe-column title="数据类型" align="center" field="dataType" :min-width="160">
						<template slot-scope="scope">
							<span>{{ scope.row.dataType === 1 ? '数字型' : '字符型' }}</span>
						</template>
					</vxe-column>
					<vxe-column title="标准值" align="right" field="val" :min-width="160"></vxe-column>
					<vxe-column title="误差(%)" align="right" field="plusOrMinus" :min-width="160"></vxe-column>
					<vxe-column title="下限" align="right" field="valMin" :min-width="160"></vxe-column>
					<vxe-column title="上限" align="right" field="valMax" :min-width="160"></vxe-column>
				</jk-table>
			</el-form>
		</jk-dialog>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import technologyDetailDialog from '../../technology/task/technology-detail-dialog';
    export default {
        mixins: [calHeight],
        components: {
            technologyDetailDialog
        },
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataItem: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                tableData: [],
                showDialog: false,
                confirmBtnLoading: false,
                saveDialogState: false,
                ruleForm: {
                    specSheet: {}
                },
                rules: {},
                tableLoading: false
            };
        },
        methods: {
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                    this.$nextTick(() => {
                        this.$refs.ruleForm.resetFields();
                    });
                }
            },
            transformItemData(list) {
                let arr = [];
                arr = list.map(x => {
                    x.val = x.dataType === 1 ? Number(x.val) : x.val;
                    x.valMax = x.dataType === 1 ? Number(x.valMax) : x.valMax;
                    x.valMin = x.dataType === 1 ? Number(x.valMin) : x.valMin;
                    return x;
                });
                return arr;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    const cpData = this.dataItem ? JSON.parse(JSON.stringify(this.dataItem)) : {};
                    cpData.specSheet.specSheetParamList = this.transformItemData(cpData.specSheet.specSheetParamList || []);
                    this.ruleForm = cpData;
                }
            }
        }
    };
</script>
